<template>
  <!-- 
    *问题：1、加粗倾斜有序列表不生效；2、doc文件无法解析；3、全屏时有其他元素悬浮在输入框内;
    *解决：1、默认样式font:inherit导致，重写样式；2、屏蔽doc文件，插件不支持；3、调整z-index为2000，设置为position:relative；
    *文件：1、Editor.vue，Editor.ts，与所有引用Editor的文件（修改了z-index）
   -->
  <div v-loading="editorLoading"  class="container">
    <div style="border: 1px solid #ccc">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor style="height: 500px; overflow-y: hidden;font: -webkit-control !important;" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @customPaste="customPaste" /><!-- @customPaste="customPaste" -->
    </div>
    <input v-show="false" id="changeFile" ref="fileRef" type="file" @change="fileChange" accept=".docx" />
  </div>
</template>

<script lang="ts" src="./Editor.ts"></script>
<style src="@wangeditor/editor/dist/css/style.css" important></style>
<style lang="scss" scoped>
.container{
    position: relative;
}
::v-deep strong{
  font-weight: bold !important;
}
::v-deep .italic{
  font-style:italic !important;
}
::v-deep ol{
  list-style: decimal
}

/* 问题：H1-H5样式不生效
  修改思路：重置样式
  相关文件：Editor.vue
*/
::v-deep h1 {
  font-size: 2em;
    font-weight: bold;
}
::v-deep h2 {
  font-size: 1.5em;
    font-weight: bold;
}

::v-deep h3 {
    font-size: 1.17em;
    font-weight: bold;
}
::v-deep h4 {
    font-weight: bold;
}
::v-deep h5 {
  font-size: 0.83em;
    font-weight: bold;
}

#wangeditor {
  width: 100%;
  height: 100%;
}
</style>
